import { requestPOST } from "@/request";
import { View } from "@tarojs/components";
import { useEffect, useState } from "react";

import HeaderSearch from "@/components/HeaderSearch/index";
import Header from "@/components/Header/index";
import Footer from "@/components/Footer/index";
import Taro from "@tarojs/taro";

export default function Index() {
  const [titles, setTitles] = useState<any>([]);
  const [info, setInfo] = useState<any>([]);

  const getTitles = () => {
    requestPOST("other/getDictLabel/bj_navigation_type").then((res) => {
      requestPOST("other/getNavigationList").then((res1) => {
        setInfo(res1);
        setTitles(res);
      });
    });
  };

  useEffect(() => {
    getTitles();
  }, []);

  const gotoPage = (title) => {
    if (title === "入驻协议" || title === "退换货政策")
      Taro.navigateTo({
        url: `/packages/articel/index?id=6`,
      });
  };

  return (
    <View className="taroBox">
      <HeaderSearch />
      <Header />
      <View style={{ padding: "14px" }}>
        {titles.map((item) => (
          <View key={item.dictValue} style={{ marginTop: "10px" }}>
            <View style={{ color: "#555" }}>{item.dictLabel}</View>
            <View
              style={{
                display: "flex",
                alignItems: "center",
                gap: "10px 20px",
                flexWrap: "wrap",
                margin: "10px 0",
                fontSize: "14px",
                color: "#858585",
              }}
            >
              {info
                .filter((item1) => item1.typeId == item.dictValue)
                .map((item1) => (
                  <View onClick={() => gotoPage(item1.title)}>
                    {item1.title}
                  </View>
                ))}
            </View>
          </View>
        ))}
      </View>
      <Footer />
    </View>
  );
}
